<template>
  <div class="asideFixed">
    <ul class="asideTitle">
      <li :class="{lired:li1img1==1,liwhite:li1img1==0}" @mouseover="changeli1" @mouseout="changeli1out">
        <img src="../../assets/img/10-右侧悬浮框/1.png" v-if="li1img1==0" class="replaceImg">
        <img src="../../assets/img/10-右侧悬浮框/2.png" v-if="li1img1==1" class="replaceImg">
        <p @click="routeLogin">
          <a href="javascript:;"  :class="{pwhite:li1img1==1,pgray:li1img1==0}">登录</a>
        </p>
        <p>
          <a href="javascript:;" :class="{pwhite:li1img1==1,pgray:li1img1==0}">—</a>
        </p>
        <p @click="routeRegist">
          <a href="javascript:;"  :class="{pwhite:li1img1==1,pgray:li1img1==0}">注册</a>
        </p>
      </li>
      <li @mouseover="changeli2" @mouseout="changeli2out" :class="{lired:li2img1==1,liwhite:li2img1==0}" @click="showOne">
        <img src="../../assets/img/10-右侧悬浮框/3.png" v-if="li2img1==0" class="replaceImg">
        <img src="../../assets/img/10-右侧悬浮框/4.png" v-if="li2img1==1" class="replaceImg">
        <p >
          <a href="javascript:;" :class="{pwhite:li2img1==1,pgray:li2img1==0}">客服专线</a>
        </p>
        <div v-if="lll=='one'&&show1" class="asideContentOne">
          <p>
            <span>客服QQ在线：</span>
            <span>1607653806</span>
          </p>
          <button @click="connectQQ">
            <img src="../../assets/img/10-右侧悬浮框/5.png">
            <span>联系客服</span>
          </button>
          <p>
            <span>免费热线：</span>
            <span>400-800-3683</span>
          </p>
        </div>
      </li>
      <li :class="{lired:li3img1==1,liwhite:li3img1==0}" @mouseover="changeli3" @mouseout="changeli3out" @click="showTwo">
        <img src="../../assets/img/10-右侧悬浮框/6.png" v-if="li3img1==0" class="replaceImg">
        <img src="../../assets/img/10-右侧悬浮框/7.png" v-if="li3img1==1" class="replaceImg">
        <p>
          <a href="javascript:;" :class="{pwhite:li3img1==1,pgray:li3img1==0}" >营销顾问</a>
        </p>
        <div v-if="lll=='two'&&show2" class="asideContentTWO">
          <div>
            <img src="../../assets/img/code.jpg">
            <p>扫一扫，加微信</p>
            <button @click="connectQQ">
              <img src="../../assets/img/10-右侧悬浮框/5.png">
              <span>在线咨询</span>
            </button>
          </div>
          <div>
            <img src="../../assets/img/icon.png" style="margin-top: 6px;">
            <p style="margin-top: 6px;font-size:14px;color:rgb(34,34,34);">美辰新媒</p>
            <p style="margin-top: 9px;font-size:14px;color:rgb(34,34,34);">400-800-3683</p>
            <button @click="connectQQ">
              <img src="../../assets/img/10-右侧悬浮框/5.png">
              <span>在线咨询</span>
            </button>
          </div>
        </div>
      </li>
      <li style="border:none;">
        <img src="../../assets/img/totop.png" alt="" @mouseover="changeIconTop" v-if="imgIndex==0" @mouseout="changeIconTopPos" @click="topTop">
        <img src="../../assets/img/hovertotop.png" alt="" @mouseover="changeIconTop" v-if="imgIndex==1" @mouseout="changeIconTopPos" @click="topTop">
      </li>
    </ul>
  </div>
</template>
<script>
import bus from '../../utils/bus'
export default {
  data() {
    return {
      lll: "three",
      show1: false,
      show2: false,
      imgIndex: 1,
      scrollLen: "",
      li1img1: 0,
      li2img1: 0,
      li3img1: 0
    };
  },
  created(){
   this.changeli2()
  },
  methods: {
    changeli1() {
      this.li1img1 = 1;
    },
    changeli1out() {
      this.li1img1 = 0;
    },
    changeli2() {
      this.li2img1 = 1;
    },
    changeli2out() {
      this.li2img1 = 0;
    },
    changeli3() {
      this.li3img1 = 1;
    },
    changeli3out() {
      this.li3img1 = 0;
    },
    showOne() {
      this.lll = "one";
      this.show1 = !this.show1;
    },
    showTwo() {
      this.lll = "two";
      this.show2 = !this.show2;
    },
    changeIconTop() {
      this.imgIndex = 0;
    },
    changeIconTopPos() {
      this.imgIndex = 1;
    },
    topTop() {
      document.documentElement.scrollTop = 0;
    },
    routeLogin() {
      this.$router.push({ path: "/login" });
    },
    routeRegist() {
      this.$router.push({ path: "/Regist" });
    }
  },
  mounted(){
    
  },
  created(){
    bus.$on('showConsult', data => {
      this.lll = 'two'
      this.show2 = data
    })
  }
};
</script>
<style scoped>
.asideTitle {
  width: 40px;
  height: 500px;
  position: fixed;
  right: 10px;
  top: 50%;

  margin-top: -250px;
    /* z-index:9999; */
}
.asideTitle > li {
  position: relative;
}
.asideTitle > li.lired {
  background: #ee4041;
  border:1px solid #ee4041;
}
.asideTitle > li.liwhite {
  background: #fff;
}
.asideTitle > li > p > a.pwhite {
  color: #fff;
}
.asideTitle > li > p > a.pgray {
  color: #666;
}
.asideTitle > li > div {
  position: absolute;
  right: 39px;
  top: 0;
}
.asideL {
  width: 274px;
  float: left;
  position: relative;
}

.asideTitle li:nth-child(1) {
  height: 140px;
}
.asideTitle li:nth-child(2) {
  height: 130px;
}
.asideTitle li:nth-child(3) {
  height: 130px;
}
.asideTitle li:nth-child(1) p:nth-child(3) {
  line-height: 3px;
  margin-top: 2px;
}
.asideTitle li:nth-child(1) p:nth-child(4) {
  margin-top: 2px;
}
.asideTitle li {
  margin-top: 10px;
  border: 1px solid #c6c6c6;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
.asideTitle li:nth-child(1) > p {
  /* width: 15px; */
  padding: 0 10px;
  margin: 0 auto;
  font-size: 16px;
  color: rgb(102, 102, 102);
  margin-top: 5px;
}
.asideTitle li:nth-child(2) > p {
  width: 15px;
  margin: 0 auto;
  font-size: 16px;
  color: rgb(102, 102, 102);
  margin-top: 5px;
}
.asideTitle li:nth-child(3) > p {
  width: 15px;
  margin: 0 auto;
  font-size: 16px;
  color: rgb(102, 102, 102);
  margin-top: 5px;
}
.asideHoverBg {
  background-color: #ee4041;
}
.asideHoverColor {
  color: #fff;
}
.asideContentOne {
  width: 220px;
  height: 130px;
  border: 1px solid #c6c6c6;
  z-index: 99;
  text-align: center;
  box-sizing: border-box;
  margin-top:-1px;
  margin-right:-1px;
  background:rgba(248, 247, 247, 0.8)
}
.asideContentOne button {
  background-color: #ed413f;
  color: #fff;
  width: 170px;
  height: 26px;
  margin-top: 15px;
  font-size: 14px;
  text-align: center；
}
.asideContentOne button span {
  margin-left: 10px;
}
.asideContentOne p {
  font-size: 14px;
  
}
.asideContentOne p:nth-child(1) {
  margin-top: 16px;
}
.asideContentOne p:nth-child(3) {
  margin-top: 15px;
}
.asideContentOne p:nth-child(3) span:nth-child(1) {
  font-size: 14px;
  color: rgb(102, 102, 102);
}
.asideContentOne p:nth-child(3) span:nth-child(2) {
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.asideContentOne p:nth-child(1) span:nth-child(1) {
  font-size: 14px;
  color: rgb(102, 102, 102);
}
.asideContentOne p:nth-child(1) span:nth-child(2) {
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.asideContentTWO {
  width: 274px;
  height: 192px;
  border: 1px solid #c6c6c6;
  box-sizing: border-box;
  margin-top:-1px;
  margin-right:-1px;
  background:rgba(248, 247, 247, 0.8);
  background:#fff;
}
.asideContentTWO > div:nth-child(1) {
  float: left;
  width: 120px;
  height: 150px;
  margin-top: 20px;
  margin-left: 10px;
  border: 1px solid #c6c6c6;
  text-align: center;
}
.asideContentTWO > div:nth-child(1) > img {
  margin-top: 6px;
}
.asideContentTWO > div:nth-child(1) > p {
  margin-top: 5px;
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.asideContentTWO > div:nth-child(1) > button {
  margin-top: 2px;
}
.asideContentTWO > div > button > span {
  margin-left: 10px;
}
.asideContentTWO button {
  width: 100%;
  height: 30px;
  background-color: #ed413f;
  color: #fff;
}
.asideContentTWO > div:nth-child(2) {
  float: left;
  width: 120px;
  height: 150px;
  margin-top: 20px;
  border: 1px solid #c6c6c6;
  margin-left: 10px;
  text-align: center;
}
.asideContentTWO p {
  font-size: 14px;
}
.replaceImg {
  margin-top: 8px;
}
</style>


